<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>今天练习css</title>

    <!-- 内部样式 -->
    <!-- style 标签若是在html文件内 一般是放在head 标签中的 -->
    <!-- <style>
        p {
            color: red;
            font-size: 30px;
        }
    </style> -->

    <script>
         let num = 1;

        function test1() {
            //let num = 2;

            function test2() {
                let num = 3;
                console.log("test2: " + num);
            }
            let num = 2;
            test2();

            console.log("test1: " + num);
        }

        test1();

        console.log("global: " + num);


      
    </script>
    <style>
        /* 3. id选择器 */
        /* id是唯一的，id选择器只能针对唯一的id起作用 */
        /* #oneDiv {
            color: red;
        } */

        /* 2.类选择器 */
        /* 此处定义了一个 CSS 类，名字就叫做 one ， 注意 CSS 类名定义的时候需要使用 . 开头*/
        /* .one {
            color: red;
        }

        .two {
            color: green;
        } */

        /* .one>a {
            color: red;
        } */

        /* 并集选择器 */
        /* .one, .two {
            font-size: 30px;
        } */

        /* 伪类选择器 */
        /* ：hover   光标悬停时的状态 */
        /* ：active  光标按下时的状态 */
        /* .one:hover {
            color: blue;
        } */

        /* ：active  光标按下时的状态，比如悬停 或者 按下 图标跳一下 */
        /* .one:active {
            color: green;
            font-size: 30px;
        } */


        .one {
            /* font-family 设置字体 */
            /* 下面两个同时设置字体，生效的是最后一个 */
            font-family: "楷体";
            font-family: "华文行楷";  

            font-size: 30px;

            /* font-weight 设置字体粗细 400是正常粗细  700是粗 */
            font-weight: 700;
        }


    </style>

    <!-- 外部样式
    <link rel="stylesheet" href="style.css"> -->
</head>
<body>
    <div class="one">
            这是一个div标签
    </div>

    <div id="oneDiv" class="one">
        <!-- 这是子元素 -->
        <a href="#"> 链接1</a>
        <p>
            <!-- 这是孙子元素 , .one>a 这个样式不会对孙子元素生效 -->
            <a href="#">链接2</a>
        </p>
    </div>

    <!-- <div class="one  two">
        这是一个div标签
    </div>
    
    <p class="one">
        这是一个div标签
    </p> -->

    <!-- 内联样式的优先级高于外部样式的  外部样式高于内部样式-->
    <!-- 这是内部样式 -->
    <p style="color: green; font-size: 30px;">
        这是用内联的形式完成css的
    </p>
</body>
</html>